<template>
	<div class="layout-padding">
		<vp-card class="h100" body-class="flex h100 w100">
		<vp-tabs v-model="activeTab">
			<vp-tab-pane name="functionRoleTab">
				<template #label><vp-label zh="功能角色" en="Function Role" /></template>
				<FunctionRoleTab v-show="activeTab==='functionRoleTab'" />
			</vp-tab-pane>
			<vp-tab-pane name="modelRoleTab">
				<template #label><vp-label zh="机型角色" en="Model Role" /></template>
				<ModelRoleTab v-show="activeTab==='modelRoleTab'" />
			</vp-tab-pane>
			<el-tab-pane name="warehouseTab">
				<template #label><vp-label zh="仓库权限" en="Warehouse Permission" /></template>
				<WarehouseTab v-show="activeTab==='warehouseTab'" />
			</el-tab-pane>
			<el-tab-pane name="baseTab">
				<template #label><vp-label zh="基地权限" en="Base Permission" /></template>
				<BaseTab v-show="activeTab==='baseTab'" />
			</el-tab-pane>
		</vp-tabs>
	</vp-card>
	</div>
</template>
<script setup lang="ts" name="systemRole">
	import { defineAsyncComponent, ref } from 'vue'
	const FunctionRoleTab = defineAsyncComponent(() => import('./component/FunctionRoleTab.vue'));
	const ModelRoleTab = defineAsyncComponent(() => import('./component/ModelRoleTab.vue'));
	const WarehouseTab = defineAsyncComponent(() => import('./component/WarehouseTab.vue'));
	const BaseTab = defineAsyncComponent(() => import('./component/BaseTab.vue'));
	const activeTab = ref('functionRoleTab');
</script>
<style scoped lang="scss">
</style>
